<template>
  <div id="example">
    <HotTable ref="hotInstance" :settings="hotSettings"></HotTable>
  </div>
</template>

<script>
  import { onMounted, ref, reactive, defineComponent, computed } from 'vue'
  import { HotTable } from '@handsontable/vue3'
  import Handsontable from 'handsontable'
  import { ContextMenu } from 'handsontable/plugins/contextMenu'
  import { alignHeaders, addClassesToRows } from '/src/hooks/hooks-callbacks'
  import { registerAllModules } from 'handsontable/registry'
  import { excelData } from '/src/utils/excelDataArr'
  // import { excelData } from '/src/utils/excelDataArrObject'
  import 'handsontable/dist/handsontable.full.min.css'
  import 'handsontable/languages/zh-CN'; //汉语包
  registerAllModules() // 注册 Handsontable 模块

  export default defineComponent({
    components: {
      HotTable,
    },
    props: {
      updataExcel: {
        type: Object,
        default: () => ({
          data: excelData,
          colWidths: [170, 222, 130, 120, 120, 140, 156],
          colHeaders: ['Company name','Name','Sell date','In stock','Qty','Order ID','Country'], 
          columns: [
            { data: 1, type: "text" },
            { data: 2, type: "text" },
            { data: 3, type: "text" },
            { data: 4, type: "date", allowInvalid: false },
            { data: 5, type: "text" },
            { data: 6, type: "checkbox", className: "htCenter"},
            { data: 7, type: "numeric"},


          ],
          dropdownMenu: true,
          hiddenColumns: { indicators: true },
          contextMenu: true,
          multiColumnSorting: true,
          filters: true,
          rowHeaders: true,
          afterGetColHeader: alignHeaders,
          beforeRenderer: addClassesToRows,
          manualRowMove: true,
          language: "zh-CN",
          licenseKey: "non-commercial-and-evaluation"
        })
      }
    },
    emits: ['transmitDom'],
    setup(props, { emit }) {
      console.log(props);
      let hotInstance = ref(null)
      const hotSettings = ref(props.updataExcel)
      var data = computed(() => {
        return excelData
      })
      var alignHeadersProp = computed(() => {
        return alignHeaders
      })
      var addClassesToRowsProp = computed(() => {
        return addClassesToRows
      })
      onMounted(() => {
        // console.log(hot);
        // hot.loadData(data.value)
        // listData.value.data = null
        // listData.value.data = excelData
        // console.log(listData.value);
        // console.log(hotInstance.value);
      })
      const transmitDom = () => {
        const container = hotInstance.value
        const hot = new Handsontable(container, hotSettings.value)
        console.log(11);
        emit('transmitDom', hot);
      }
      return {
        data,
        hotSettings,
        hotInstance,
        alignHeadersProp,
        addClassesToRowsProp,
        transmitDom
      }
    }
  })
</script>

<style lang="scss" scoped>
  #example {
    position: relative;
    width: 100%;
    height: 100vh;
  }
</style>